<template>
  <!-- v-if="goods"因为数据回来的慢 价格哪里会有一瞬间是not defined 所有数据不回来 页面干脆不显示 -->
  <view class="goods_detail" v-if="goods">
    <!-- 轮播图 开始-->
    <u-swiper
      height="750"
      :list="goods.pics"
      name="pics_big_url"
      img-mode="widthFix"
      @click="handlePreviewImage"
    >
    </u-swiper>
    <!-- 轮播图 结束-->

    <!-- 价格 title  开始 -->
    <view class="goods_price">¥{{ goods.goods_price }}</view>
    <view class="goods_title">{{ goods.goods_name }}</view>
    <!-- 价格 title  结束 -->

    <!-- 图文详情 开始-->
    <view class="goods_xq">图文详情</view>
    <!-- 富文本解析器 复杂点的数据建议用u-parse  简单点的用 rich-text -->
    <u-parse :html="goods.goods_introduce"></u-parse>
    <!-- 图文详情 结束-->

    <!-- 提交订单栏 开始 -->
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <view class="item">
          <u-icon
            name="home"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">店铺</view>
        </view>
        <navigator
          open-type="switchTab"
          url="/pages/cart/cart"
          class="item car"
        >
          <u-badge
            class="car-num"
            :count="allSum"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>

          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <!-- navigator默认是不能跳tab页面的  所有要加个属性来解决 switchTab -->
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view class="cart btn u-line-1" @click="addShopping">加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
    <!-- 提交订单栏 结束 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      goods: {}, //轮播图
    };
  },
  async onLoad({ id }) {
    //请求轮播图数据
    const res = await this.$u.get("/goods/detail", { goods_id: id });
    this.goods = res.message;
  },

  computed: {
    //总件数
    allSum() {
      //用getters改造数据
      return this.$store.getters.doneTodos;
    },
  },

  methods: {
    //点击轮播图 放大预览
    handlePreviewImage(index) {
      //wx.previewImage只能接收数组
      const urls = this.goods.pics.map((v) => v.pics_big);
      //current指当前点击的图片就放大当前图片
      const current = urls[index];
      wx.previewImage({ urls, current });
    },

    //点击加入购物车
    addShopping() {
      const index = this.$store.state.cartList.findIndex(
        (v) => v.goods_id == this.goods.goods_id
      );

      // 先获取数组  方便修改
      let cartList = this.$store.state.cartList;

      if (index == -1) {
        cartList.push({ ...this.goods, checked: true, count: 1 });
      } else {
        cartList[index].count++;
      }
      //修改后  发送给vuex的仓库修改才算真正修改完成
      this.$store.commit("cartListNum", cartList);

      //加入成功 提示
      uni.showToast({
        title: "加入成功",
      });
    },
  },
};
</script>

<style lang="scss">
.goods_detail {
  padding-bottom: 102rpx;
}
.box {
  padding: 0 126rpx;
}
.goods_price {
  font-size: 36rpx;
  color: $themeColor;
}
.goods_title {
  font-size: 30rpx;
  margin-top: 5rpx;
}

.goods_xq {
  text-align: center;
  font-size: 30rpx;
  margin-top: 20rpx;
}

.navigation {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  display: flex;
  margin-top: 100rpx;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 16rpx 0;
  .left {
    display: flex;
    font-size: 20rpx;
    .item {
      margin: 0 30rpx;
      &.car {
        text-align: center;
        position: relative;
        .car-num {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
  }
  .right {
    display: flex;
    font-size: 28rpx;
    align-items: center;
    .btn {
      line-height: 66rpx;
      padding: 0 30rpx;
      border-radius: 36rpx;
      color: #ffffff;
    }
    .cart {
      background-color: #ed3f14;
      margin-right: 30rpx;
    }
    .buy {
      background-color: #ff7900;
    }
  }
}
</style>